import { visualConfig, } from '@editor/editor.config'
import { createNamespace } from '@utils/index'
import { createNewBlock } from '@utils/editor-config'
import Draggable from 'vuedraggable'
import { cloneDeep } from 'lodash'

import '../../index.scss'

const [bem] = createNamespace('base-comp');

const customComponentsList = visualConfig.componentModules.custom;

export default {
    name: 'CustomComp',
    label: '业务组件',
    order: 5,
    icon: 'el-icon-upload',
    data() {
        return {
            customComponentsList: [],
        }
    },
    methods: {
        clone(comp) {
            const newComp = cloneDeep(comp)
            return createNewBlock(newComp)
        },
        onEnd(e) {
            const {
                to: {
                    className 
                },
                oldIndex,
            } = e;
            if (className === 'list-group') {
                // this.addCurBlock({ ...this.baseComponentsList[oldIndex]})
            }
        },
    },
    render(h) {
        return (
            <div class={bem('list-group')}>
                <Draggable
                    list={this.customComponentsList}
                    group={{ name: 'block', pull: 'clone', put: false }}
                    clone={this.clone}
                    onEnd={this.onEnd}
                >
                    <transition-group>
                        {
                            customComponentsList.map(component => {
                                return (
                                    <div
                                        class={bem('group-item')}
                                        data-label={component.label}
                                        key={component.key}
                                    >
                                        {
                                            component.preview(h)
                                        }
                                    </div>
                                )
                            })
                        }
                    </transition-group>
                </Draggable>
            </div>
        )
    }
}